@layer components {
  .DemoRoot {
    background-color: var(--color-content);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .DemoPlayground {
    position: relative;

    background-color: var(--color-content);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);

    /* Scroll */
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;

    /* Scroll containers may be focusable */
    &:focus-visible {
      outline: 2px solid var(--color-blue);
      outline-offset: -1px;
      z-index: 1;
    }
  }

  /* A separate element for the padding to work when there is horizontal scroll */
  .DemoPlaygroundInner {
    padding: 2rem 1.5rem;
    min-height: 8rem;

    /* Make sure contents aren't squashed smaller than their natural width */
    min-width: fit-content;

    /* Center the contents vertically */
    display: flex;
    justify-content: center;
    align-items: center;

    @media (--xs) {
      padding: 3rem 1.5rem;
      min-height: 11.25rem; /* Match .DemoCodeBlockRoot pre min-height */
    }
  }

  .DemoToolbar {
    @apply text-xs;
    white-space: nowrap;
    color: var(--color-gray);
    background-color: var(--color-gray-50);
    background-clip: padding-box;
    border-block: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    user-select: none;

    /* Scroll */
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    /* Scroll containers may be focusable */
    &:focus-visible {
      position: relative;
      outline: 2px solid var(--color-blue);
      outline-offset: -1px;
      z-index: 1;
    }
  }

  .DemoFilename {
    font-family: var(--font-mono);
    letter-spacing: normal;
    color: var(--color-foreground);
    font-weight: bold;
    user-select: text;
  }

  .DemoFilename:hover {
    text-decoration: underline;
  }

  .DemoTabsList {
    display: flex;
    gap: 1rem;
  }

  .DemoTab {
    font-family: var(--font-mono);
    letter-spacing: normal;
    cursor: default;
    position: relative;
    z-index: 0;
    outline: 0;

    @media (hover: hover) {
      &:hover {
        &::before {
          background-color: var(--color-gray-100);
        }
      }
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      z-index: -1;
    }

    &::before {
      inset: -0.125rem -0.375rem;
      border-radius: var(--radius-sm);
    }

    /* Increase the clickable size  */
    &::after {
      inset: -0.375rem -0.5rem;
    }

    &[data-active] {
      color: var(--color-foreground);
      font-weight: bold;

      &::before {
        background-color: white;
        outline: 1px solid var(--color-gray-300);
        outline-offset: -1px;
        box-shadow:
          0 2px 3px -2px var(--color-gray-300),
          inset 0 -1px 1px var(--color-gray-200);
      }

      @media (prefers-color-scheme: dark) {
        &::before {
          outline: none;
          background-color: var(--color-gray-50);
          box-shadow:
            0 0 3px 0 var(--color-gray-300),
            inset 0 0 0 1px var(--color-gray-400);
        }
      }
    }

    &:focus-visible::before {
      outline: 2px solid var(--color-blue);
      outline-offset: -1px;
    }
  }

  .DemoCodeBlockRoot {
    display: flex;
    flex-direction: column;
    position: relative;
    outline: 0;

    &[data-closed] {
      &::before {
        content: '';
        position: absolute;
        pointer-events: none;
        height: 7.5rem;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 60%));
      }

      @media (prefers-color-scheme: dark) {
        &::before {
          background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 60%));
        }
      }
    }
  }

  .DemoCodeBlockViewport {
    /* Prevent Chrome/Safari page navigation gestures when scrolling horizontally */
    overscroll-behavior-x: contain;

    /* Max height for code blocks, if we ever want to recover this (https://github.com/mui/base-ui/pull/1187) */
    /* max-height: clamp(8.75lh + 0.5rem, 80vh, 23.75lh + 0.5rem); */

    &[data-closed] {
      overflow: hidden;
      max-height: calc(8.75lh + 0.5rem); /* Show almost 9 code lines plus top padding */
    }
  }

  .DemoSourceBrowser {
    @apply text-xs;
    padding: 0.5rem 0.75rem;
    cursor: text;

    & code {
      /* Different fonts may introduce vertical align issues */
      display: block;
      /* Make sure selection highlight spans full container width in Safari */
      flex-grow: 1;
    }
  }

  .DemoCollapseButton {
    @apply text-xs;
    background-color: var(--color-gray-50);
    cursor: default;
    width: 100%;
    color: var(--color-gray);
    height: 2.25rem;
    border-top: 1px solid var(--color-gray-200);
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom: 1px solid transparent;
    background-clip: padding-box;
    margin-bottom: -1px;
    user-select: none;

    position: sticky;
    bottom: -1px;
    z-index: 1;

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-gray-75);
      }
    }

    &:active {
      background-color: color-mix(in oklch, var(--color-gray-75), var(--color-gray-600) 5%);
    }

    &:focus-visible {
      outline: 2px solid var(--color-blue);
      outline-offset: -1px;
      z-index: 1;
    }
  }
}
